<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-heading grade='1'>学员请假</e-heading>

      <div class="leave_student"  v-loading="loading">
        <el-row>
          <el-col :span="3">
            <div class="grid-content label-right">
              请假人：
            </div>
          </el-col>
          <el-col :span="21">
            <el-select v-model="studentId" class="leave-control" size="small" filterable clearable>
              <el-option v-for="item in train_student_list.list" 
                :key="item.id"
                :value="item.id"
                :label="item.name">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row class="middle-row">
          <el-col :span="3">
            <div class="grid-content bg-purple label-right">
              请假时间：
            </div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content bg-purple-light">
              <el-date-picker class="leave-control"
              v-model="date" type="daterange" size="small" placeholder="选择请假时间" :picker-options="pickerOptions" @change="handleDate" />
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3" v-if="courseTime">
            <div class="grid-content label-right">
              请假课程：
            </div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content bg-purple-light" >

              <div class="course" v-if="isCourse&&courseTime">
                <el-scrollbar class="import_table" wrap-class="vacade-scroll">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in train_student_vacate" :key="item.id" :label="item.id">
                      <span class="course-name" :title="item.courseName">{{item.courseName}}</span>
                      <span>{{new Date(item.beginDate).format('yyyy-MM-dd')}} {{item.beginWeekCode | getWeekDay}} {{new Date(item.startTime).format('hh:mm')}}-{{new Date(item.endTime).format('hh:mm')}}</span>
                    </el-checkbox>
                  </el-checkbox-group>
                </el-scrollbar>
              </div>

              <div v-else-if="!isCourse&&courseTime">暂无可请假的课程</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="btn-groups center">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :disabled="!checkList.length">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
export default {
  props: {
  },
  data () {
    return {
      studentId: '',
      studentInfo: {},
      loading: false,
      checkList: [],
      courseTime: false,
      isCourse: '', // 显示是否有课程
      date: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  created () {
    this.$store.dispatch('train_student_list', {
      page: 1,
      rows: 100000
    })
  },
  computed: {
    ...mapGetters({
      train_student_list: 'train_student_list', // 学员列表数据
      train_student_vacate: 'train_student_vacate',
      train_student_close_vacate: 'train_student_close_vacate'
    })
  },
  watch: {
    train_student_vacate (value) {
      if (value.length === 0) {
        this.courseTime = true
        this.isCourse = false
      } else {
        this.courseTime = true
        this.isCourse = true
      }
    },
    studentId (val) {
      if (val && this.date.length) {
        this.$store.dispatch('train_student_vacate', {
          studentId: this.studentInfo.id || this.studentId,
          beginDate: +new Date(this.date[0]),
          endDate: +new Date(this.date[1])
        })
      }
    }
  },
  methods: {
    handleDate (value) {
      if (!value) { // 时间不存在
        this.courseTime = false
        this.isCourse = false
      } else {
        this.$store.dispatch('train_student_vacate', {
          studentId: this.studentInfo.id || this.studentId,
          beginDate: +new Date(this.date[0]),
          endDate: +new Date(this.date[1])
        })
      }
    },
    handleCancel () {
      this.studentId = ''
      this.date = ''
      this.courseTime = false
      this.checkList = []
      this.$forceUpdate()
    },
    handleSubmit () {
      this.loading = true
      trainApi.studentPutVacate(JSON.stringify(this.checkList), {context: this, successMsg: '请假成功'}).then(res => {
        this.handleCancel()
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
.middle-row{
  margin: 20px 0;
}
.label-right{
  text-align: right;
  line-height: 36px;
  padding-right:20px;
}
.leave-control{
  width:310px!important;
}
.leave_student {
  .el-dialog--small{
    width:600px;
  }
  .el-col {
    line-height: 40px;
  }
  .el-checkbox-group {
    .el-checkbox{
      .course-name {
        max-width: 130px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: top;
      }
    }
  }
  .vacade-scroll{
    max-height:500px;
    overflow-y: scroll;
  }
}
.btn-groups{
  margin-top: 20px;
}
</style>
